<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        <input type="file" multiple name="avator">
        <button>提交</button>

    </form>

    <script>
        const formEle = document.querySelector('form');
        formEle.onsubmit = function(e){
            e.preventDefault();

            // 采集表单信息 
            // FormData
            const formData = new FormData(formEle);
            // formData是个对象 
            // 是个可迭代的对象 
            // 什么是可迭代的对象 
            // 箱子中有很多东西 可以把箱子中的东西一个一个的拿出来
            // 这个箱子就是可迭代的对象
            // for(let value of formData){
            //     console.log(value);
            // }

            // 上传文件
            const xhr = new XMLHttpRequest();
            xhr.open('post','http://localhost:5000/api/users/avator');
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
            // formdata对象会自动设置请求头 不需要我们手动设置  
            xhr.send(formData);
            
        }
    </script>
</body>
</html>